<template>
  <div>
    <el-card>
      <div class="header">
        <div>
          <el-input
            v-model="name"
            style="width: 200px; margin-right: 5px"
            placeholder="按姓名名称查询"
          ></el-input>
          <el-date-picker
            style="margin-right: 5px"
            v-model="dateTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" @click="handleInit">查询</el-button>
          <el-button type="success" @click="handleInit" icon="el-icon-refresh"
            >刷新</el-button
          >
        </div>
        <div>
           <el-button type="primary" @click="addUser">添加公海用户</el-button>
        </div>
      </div>

     
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 30px"
        align="center"
      >
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="sid" label="客户类型" align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="followStatus"
          label="跟进状态"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="source" label="来源" align="center">
        </el-table-column>
        <el-table-column prop="addId" label="添加人" align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="pid"
          label="跟进人"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="createTime" label="添加时间" align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="followNum"
          label="跟进次数"
          align="center"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="followTime"
          label="最新跟进时间"
          align="center"
        >
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row.id)"
              >编辑
            </el-button>
            <el-button size="mini" type="danger" @click="Delete(scope.row.id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
      <create ref="create" @Ok="handleInit"></create>
      <edit ref="edit" @Ok="handleInit"></edit>
    </el-card>
  </div>
</template>

<script>
import { getList } from "@/api/toWuser";
import { remove } from "@/api/toolUser";
import Create from "./components/create";
import Edit from "./components/edit";
export default {
  name: "index",
  components: {
    Create,
    Edit,
  },

  data() {
    return {
      page: 1,
      size: 10,
      total: 0,
      name: "",
      dateTime: [],
      startTime: "",
      endTime: "",
      tableData: [],
      id: "",
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    handleInit() {
      if (this.dateTime !== null && this.dateTime !== "") {
        this.startTime = this.dateTime[0];
        this.endTime = this.dateTime[1];
      }
      let form = {
        page: this.page,
        size: this.size,
        name: this.name,
        startTime: this.startTime,
        endTime: this.endTime,
        type: 0,
      };
      getList(form).then((res) => {
        if (res.status == 200) {
          // console.log(res)
          this.name = "";
          this.dateTime = [];
          this.tableData = res.result.list;
          this.total = Number(res.result.total);
        }
      });
    },
    edit(e) {
      this.$refs["edit"].show(e);
    },
    //添加客户
    addUser() {
      this.$refs["create"].show();
    },
    //删除
    Delete(id) {
      this.id = id;
      console.log(id);
      let form = {
        id: this.id,
      };
      remove(form).then((res) => {
        if (res.status == 200) {
          this.$message.success("删除成功");
          this.handleInit();
        }
      });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.handleInit();
    },
  },
};
</script>

<style scoped>
.po {
  margin-top: 200px;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
